<template>
  <div class="cont">
    <h1>Star</h1>
    <el-button type="info" class="btnOut" @click="btnOut">返回</el-button>
    <div class="box">
      <ul class="thead">
        <li>Images</li>
        <li>Product</li>
        <li>Unit Price</li>
        <li>Quantity</li>
      </ul>
      <ul class="tbody">
        <li v-for="(item,index) in starList" :key="index">
          <span><img :src="item.image1" alt="img"></span>
          <span>{{item.text}}</span>
          <span>{{item.price}}</span>
          <span><button class="btn" @click="addShop(item.id)">{{item.cart}}</button></span>
        </li>
      </ul>
      <!-- <table>
        <thead>
          <tr>
            <th>Images</th>
            <th>Product</th>
            <th>Unit Price</th>
            <th>Quantity</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,index) in starList" :key="index">
            <td><img :src="item.image1" alt="img"></td>
            <td>{{item.text}}</td>
            <td>{{item.price}}</td>
            <td><button class="btn" @click="addShop(item.id)">{{item.cart}}</button></td>
          </tr>
        </tbody>
      </table> -->
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      starList: []
    }
  },
  async created () {
    const res = await this.$http.get(`getmyshoplike?token=${this.$store.state.token}`, this.$store.state.userId)
    this.starList = res.data.data
  },
  methods: {
    async addShop (itemId) {
      const { data: res } = await this.$http.post(`addmyshop?token=${this.$store.state.token}`, {
        shop_item_id: itemId,
        user_id: this.$store.state.userId
      })
      const { data: res2 } = await this.$http.get(`getmyshop?token=${this.$store.state.token}`, this.$store.state.userId)
      await this.$store.commit('setNumber', res2.data.length)
      window.sessionStorage.setItem('number', res2.data.length)
      console.log(res)
      this.$message.success('添加购物车成功')
    },
    btnOut () {
      this.$router.push('/Home')
    }
  }
}
</script>

<style lang="less" scoped>
.cont{
  width: 100%;
}
h1{
  font-size: 1.1rem;
  text-align: center;
  padding: 3rem 0 2rem 0;
}
.box{
  width: 80%;
  margin: 0 auto;
  box-shadow: 0 3px 6px rgba(105, 105, 105, 0.1);
}
.thead{
  border-top: 1px solid #eaedff;
}
.thead,.tbody li{
  display: flex;
}
.thead li{
  font-weight: bold;
}
.thead li,.tbody li span{
  width: 25%;
  font-size: 0.5rem;
  padding: 0.5rem;
  text-align: center;
  border-bottom: 1px solid #eaedff;
  border-right: 1px solid #eaedff;
  text-transform: capitalize;
}
.tbody li span{
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    width: 4rem;
  }
}
.btn{
  background: #84b77c;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  padding: 0.7rem 1.8rem;
  outline: none;
  border: none;
  transition: all 0.3s;
}
.btn:hover{
  background: #fe4536;
}
.container{
  position: relative;
}
.btnOut{
  position: absolute;
  right: 10%;
  top: 7%;
}
@media screen and (max-width:1100px){
  .btn{
    padding: 0.6rem 0.3rem;
    font-size: 0.05rem;
  }
}
@media screen and (max-width:768px){
  .btn{
    padding: 0.6rem 0.2rem;
    font-size: 0.05rem;
  }
}
@media screen and (max-width:576px){
  .tbody li span img{
    width: 3rem;
  }
  .btnOut{
    padding: 6px 10px;
    font-size: 12px;
  }
}
</style>
